<template>
  <div>
    <div style="display: flex; align-items: center">
      <el-form :inline="true" :model="serachData" class="demo-form-inline">
        <el-form-item label="名称:">
          <el-input v-model="serachData.name" placeholder="请输入" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select v-model="serachData.typeId" placeholder="请选择" style="width: 200px">
            <el-option label="请选择">请选择 </el-option>
            <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起始时间:">
          <el-date-picker type="date" placeholder="选择日期" v-model="serachData.kLastPaymentDate" clearable
            style="width:150px"></el-date-picker>-<el-date-picker type="date" placeholder="选择日期"
            v-model="serachData.jLastPaymentDate" clearable style="width:150px"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态:" style="">
          <el-select v-model="serachData.state">
            <el-option label="请选择">请选择 </el-option>
            <el-option label="待审核" value="1"></el-option>
            <el-option label="审核通过" value="2"></el-option>
            <el-option label="审核失败" value="3"></el-option>
            <el-option label="部分付款" value="4"></el-option>
            <el-option label="全部付款" value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="GetCustomList">查询</el-button>
        <el-button type="success" @click="addinfo">新增</el-button>
        <el-button type="danger" @click="getdels()">批量删除</el-button>
        <el-button type="primary" @click="exportListToExcel(customList)">导出</el-button>
      </el-form>
    </div>
    <el-table ref="multipleTable" :data="customList" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border="1">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="serialNumber" label="流水号"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="typeName" label="财务类别"> </el-table-column>
      <el-table-column prop="payer" label="付款方"> </el-table-column>
      <el-table-column prop="receivable" label="应收金额"> </el-table-column>
      <el-table-column prop="netReceipts" label="实收金额"> </el-table-column>
      <el-table-column prop="residue" label="剩余金额"> </el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="res">
          {{ res.row.state == 1 ? "待审核" : "" }}
          {{ res.row.state == 2 ? "审核通过" : "" }}
          {{ res.row.state == 3 ? "审核失败" : "" }}
          {{ res.row.state == 4 ? "全部付款" : "" }}
        </template>
      </el-table-column>
      <el-table-column prop="lastPaymentDate" label="创建时间">
        <template slot-scope="data">
          {{ data.row.lastPaymentDate.substring(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column label="操作列" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="UpdCustom(scope.row.id)"
            v-if="scope.row.state == 1 || scope.row.state == 3">编辑</el-button>
          <el-button type="text" @click="DelCustom(scope.row.id)"
            v-if="scope.row.state == 1 || scope.row.state == 3">删除</el-button>
          <el-button type="text" @click="LookCustom(scope.row.id)" v-if="scope.row.state == 1 ||
        scope.row.state == 3 ||
        scope.row.state == 2 ||
        scope.row.state == 4
        ">查看</el-button>
          <el-button type="text" @click="examine(scope.row.id)"
            v-if="scope.row.state == 1 || scope.row.state == 3">审核</el-button>
          <el-button type="text" @click="payment(scope.row.id)" v-if="scope.row.state == 2">付款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          共{{ serachData.totalCount }}条，每页显示{{
        serachData.pagesize
      }}条，共{{ serachData.pageCount }}页，当前{{ serachData.pageindex }} /
          {{ serachData.pageCount }}页
        </el-form-item>
        <el-form-item>
          <el-pagination style="text-align: left" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="serachData.pageindex" :page-sizes="[5, 10, 15, 20]" :page-size="serachData.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="serachData.totalCount">
          </el-pagination>
          <el-pagination style="text-align: left" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="serachData.pageindex" :page-sizes="[1, 2, 3, 4]" :page-size="serachData.pagesize"
            layout="total, sizes, prev, pager, next, jumper" :total="serachData.totalCount">
          </el-pagination>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog title="新增应收" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <table>
          <tr>
            <td>
              <el-form-item label="流水号" prop="serialNumber">
                <el-input v-model="ruleForm.serialNumber"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="财务类型:" prop="typeId">
                <el-select v-model="ruleForm.typeId" placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款日期" prop="lastPaymentDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.lastPaymentDate"
                  clearable></el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="应收金额" prop="receivable">
                <el-input v-model="ruleForm.receivable"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="ruleForm.payer"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" prop="desc">
                <el-input v-model="ruleForm.desc" type="textarea"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
          <el-button @click="back2()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑应收" :visible.sync="upddialogForm">
      <el-form :model="BakeForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <table>
          <tr>
            <td>
              <el-form-item label="流水号" prop="serialNumber">
                <el-input v-model="BakeForm.serialNumber" readonly></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="名称" prop="name">
                <el-input v-model="BakeForm.name"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="财务类型:" prop="typeId">
                <el-select v-model="BakeForm.typeId" placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款日期" prop="lastPaymentDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="BakeForm.lastPaymentDate"
                  clearable></el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="BakeForm.payer"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="应收金额" prop="receivable">
                <el-input v-model="BakeForm.receivable"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" prop="desc">
                <el-input v-model="BakeForm.desc" type="textarea"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
        <el-form-item>
          <el-button type="primary" @click="updForm('ruleForm')">编辑</el-button>
          <el-button @click="back1()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="查看应收" :visible.sync="upddialogFormsss">
      <el-form :model="BakeForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <table>
          <tr>
            <td>
              <el-form-item label="流水号" prop="serialNumber">
                <el-input v-model="BakeForm.serialNumber" readonly></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="名称" prop="name">
                <el-input v-model="BakeForm.name" readonly></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="财务类型:" prop="typeId">
                <el-select v-model="BakeForm.typeId" placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id"
                    readonly>
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款日期" prop="lastPaymentDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="BakeForm.lastPaymentDate" clearable
                  readonly></el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="BakeForm.payer" readonly></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="应收金额" prop="receivable">
                <el-input v-model="BakeForm.receivable" readonly></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" prop="desc">
                <el-input v-model="BakeForm.desc" type="textarea" readonly></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
        <el-form-item>
          <el-button type="primary" @click="opendown()">确定</el-button>
          <el-button @click="opendown()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="审核" :visible.sync="examinedialogForm">
      <el-form :model="BakeForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <table>
          <tr>
            <td>
              <el-form-item label="流水号" prop="serialNumber">
                <el-input v-model="BakeForm.serialNumber" readonly></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="名称" prop="name">
                <el-input v-model="BakeForm.name"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="财务类型:" prop="typeId">
                <el-select v-model="BakeForm.typeId" placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款日期" prop="lastPaymentDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="BakeForm.lastPaymentDate"
                  clearable></el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="BakeForm.payer"></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="应收金额" prop="receivable">
                <el-input v-model="BakeForm.receivable"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" prop="desc">
                <el-input v-model="BakeForm.desc" type="textarea"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
        <el-form-item>
          <el-button type="primary" @click="updstate(1)">审核通过</el-button>
          <el-button type="primary" @click="updstate(2)">审核不通过</el-button>
          <el-button @click="Cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="付款" :visible.sync="paymentdialog">
      <el-form :model="BakeForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <table>
          <tr>
            <td>
              <el-form-item label="流水号" prop="serialNumber">
                <el-input v-model="paymentForm.serialNumber" readonly></el-input>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款机构" prop="name">
                <el-input v-model="paymentForm.payInstitution"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="付款方式:" prop="typeId">
                <el-select v-model="paymentForm.typeId" placeholder="请选择" style="width: 200px">
                  <el-option v-for="item in ProCategory" :key="item.id" :label="item.typeName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td>
              <el-form-item label="付款日期" prop="lastPaymentDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="paymentForm.lastPaymentDate"
                  clearable></el-date-picker>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="付款金额" prop="receivable">
                <el-input v-model="paymentForm.netReceipts"></el-input>
              </el-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="备注" prop="desc">
                <el-input v-model="paymentForm.desc" type="textarea"></el-input>
              </el-form-item>
            </td>
          </tr>
        </table>
        <el-form-item>
          <el-button type="primary" @click="paymentinfo()">付款</el-button>
          <el-button @click="cal()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  GetReceivableselect,
  GetReceivableList,
  AddCollection,
  Delinfo,
  Delbathcollection,
  Backbathcollection,
  Updatestate,
  Updatecollection,
  Updpayment,
} from "@/api/FinanceManage/Receivables";
import XLSX from "xlsx";
export default {
  data() {
    return {
      EditId: "",
      money: "",
      //添加
      ruleForm: {
        serialNumber: "",
        name: "",
        typeId: "",
        payInstitution: "",
        payer: "",
        receivable: "",
        desc: "",
      },
      //反填
      BakeForm: {
        lastPaymentDate: "",
        id: "",
        serialNumber: "",
        name: "",
        typeId: "",
        payer: "",
        receivable: "",
        desc: "",
      },
      //付款反填
      paymentForm: {
        id: "",
        serialNumber: "",
        name: "",
        typeId: "",
        payInstitution: "",
        payer: "",
        netReceipts: "",
        desc: "",
      },
      //下拉框
      ProCategory: [],
      //显示
      customList: [],
      //查询
      serachData: {
        serialNumber: "",
        name: "",
        typeId: null,
        payer: "",
        kLastPaymentDate: null,
        jLastPaymentDate: null,
        state: null,
        pageindex: 1,
        pagesize: 5,
        pageCount: 0,
        totalCount: 0,
      },
      ids: [],
      paymentdialog: false, //付款弹框
      examinedialogForm: false, //审核弹框
      upddialogFormsss: false, //查看应收弹框
      dialogFormVisible: false, //新增应收弹框
      upddialogForm: false, //编辑应收弹框
      rules: {
        serialNumber: [
          { required: true, message: "请输入流水号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        payInstitution: [
          {
            required: true,
            message: "请选择付款日期",
            trigger: "change",
          },
        ],
        payer: [{ required: true, message: "请输入付款方", trigger: "change" }],
        receivable: [
          { required: true, message: "请输入应收金额", trigger: "blur" },
        ],
        desc: [{ required: true, message: "请输入备注", trigger: "blur" }],
      },
    };
  },
  //计算属性
  computed: {
    //计算批量删除的ids
    sid() {
      var sid = [];
      this.ids.forEach((item) => {
        sid.push(item.id);
      });
      return sid;
    },
  },
  methods: {
    //显示
    GetCustomList() {
      let data = {
        serialNumber: this.serachData.serialNumber,
        name: this.serachData.name,
        typeId: this.serachData.typeId,
        payer: this.serachData.payer,
        kLastPaymentDate: this.serachData.kLastPaymentDate,
        jLastPaymentDate: this.serachData.jLastPaymentDate,
        state: this.serachData.state,
        pageindex: this.serachData.pageindex,
        pagesize: this.serachData.pagesize,
      };
      console.log(123, data);
      GetReceivableList(data).then((res) => {
        this.customList = res.data.data;
        this.serachData.totalCount = res.data.totalCount;
        this.serachData.pageCount = res.data.pageCount;
      });
    },
    //关闭新增应收弹框
    back2() {
      this.dialogFormVisible = false;
    },
    //关闭编辑应收弹框
    back1() {
      this.upddialogForm = false;
    },
    //付款弹框取消
    cal() {
      this.paymentdialog = false; //付款
    },
    //付款弹框
    paymentinfo() {
      var params = {
        id: this.EditId,
        payInstitution: this.paymentForm.payInstitution,
      };
      console.log(params);
      Updpayment(params).then((res) => {
        if (res.data.totalCount > 0) {
          this.$message({
            message: "付款成功",
            type: "success",
          });
          this.paymentdialog = false;
          this.GetCustomList();
        } else {
          this.$message({
            message: "付款失败",
            type: "error",
          });
          return false;
        }
      });
    },
    //付款弹框
    payment(id) {
      this.paymentdialog = true;
      var params = {
        id: id,
      };
      this.EditId = id;
      console.log(params);
      Backbathcollection(params).then((res) => {
        this.paymentForm = res.data.data;
        this.paymentForm.netReceipts = res.data.data.receivable;
      });
    },
    //审核
    updstate(id) {
      var params = {
        id: this.EditId,
        stateid: id,
      };
      console.log(params);
      Updatestate(params).then((res) => {
        if (res.data.totalCount > 0) {
          this.$message({
            message: "审核成功",
            type: "success",
          });
          this.examinedialogForm = false;
          this.GetCustomList();
        } else {
          this.$message({
            message: "审核失败",
            type: "error",
          });
          return false;
        }
      });
    },
    //审核弹框
    examine(id) {
      this.examinedialogForm = true;
      var params = {
        id: id,
      };
      this.EditId = id;
      console.log(params);
      Backbathcollection(params).then((res) => {
        this.BakeForm = res.data.data;
      });
    },
    //取消
    Cancel() {
      this.examinedialogForm = false;
    },
    //查看
    LookCustom(id) {
      this.upddialogFormsss = true;
      var params = {
        id: id,
      };
      console.log(params);
      Backbathcollection(params).then((res) => {
        this.BakeForm = res.data.data;
      });
    },
    opendown() {
      this.upddialogFormsss = false;
    },
    //修改
    updForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {
            id: this.EditId,
            serialNumber: this.BakeForm.serialNumber,
            name: this.BakeForm.name,
            typeId: this.BakeForm.typeId,
            lastPaymentDate: this.BakeForm.lastPaymentDate,
            payer: this.BakeForm.payer,
            receivable: this.BakeForm.receivable,
            desc: this.BakeForm.desc,
          };
          console.log(params);
          Updatecollection(params).then((res) => {
            if (res.data.totalCount > 0) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.upddialogForm = false;
              this.GetCustomList();
            } else {
              this.$message({
                message: "修改成功",
                type: "error",
              });
              return false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //反填
    UpdCustom(id) {
      this.upddialogForm = true;
      this.EditId = id;
      var params = {
        id: id,
      };
      console.log(params);
      Backbathcollection(params).then((res) => {
        this.BakeForm = res.data.data;
      });
    },
    //删除
    DelCustom(id) {
      this.$confirm("确定删除该供应商吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var params = {
            id: id,
          };
          Delinfo(params).then((res) => {
            if (res.data.data) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.GetCustomList();
            } else {
              this.$message({
                message: "删除失败",
                type: "error",
              });
              this.GetCustomList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //批量删除
    getdels() {
      if (this.ids.length == 0) {
        this.$message({
          message: "请选择要删除的数据",
          type: "warning",
        });
        return;
      }
      var myparams = {
        ids: this.sid.toString(),
      };
      //console.log(myparams);
      this.$confirm("此操作将永久批量删除该文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          Delbathcollection(myparams).then((res) => {
            if (res.data.data) {
              this.$message({
                message: "批量删除成功",
                type: "success",
              });
              this.GetCustomList();
            } else {
              this.$message({
                message: "批量删除失败",
                type: "success",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消批量删除",
          });
        });
    },
    // 导出Excel文件
    exportListToExcel(dataList) {
      // 过滤需要导出的字段
      const filteredData = dataList.map((item) => {
        return {
          流水号: item.serialNumber,
          名称: item.name,
          分类: item.typeName,
          收款方: item.payer,
          应收金额: item.receivable,
          实收金额: item.netReceipts,
          状态: item.state,
          创建时间: item.lastPaymentDate.replace("T", " ").substr(0, 19),
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      //设置表格宽度
      worksheet["!cols"] = [
        { width: 10 },
        { width: 15 },
        { width: 15 },
        { width: 20 },
        { width: 10 },
        { width: 15 },
        { width: 15 },
        { width: 20 },
      ];

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 导出Excel文件
      XLSX.writeFile(workbook, "财务应付.xlsx");
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var params = {
            serialNumber: this.ruleForm.serialNumber,
            name: this.ruleForm.name,
            typeId: this.ruleForm.typeId,
            lastPaymentDate: this.ruleForm.lastPaymentDate,
            payer: this.ruleForm.payer,
            receivable: this.ruleForm.receivable,
            desc: this.ruleForm.desc,
          };
          AddCollection(params).then((res) => {
            if (res.data.totalCount > 0) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.GetCustomList();
            } else {
              this.$message({
                message: "添加失败",
                type: "error",
              });
              return false;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //打开新增弹窗
    addinfo() {
      this.dialogFormVisible = true;
    },
    //批量删除获取值
    handleSelectionChange(val) {
      this.ids = val;
    },
    //绑定类型下拉框
    GetProType() {
      GetReceivableselect().then((res) => {
        this.ProCategory = res.data.data;
      });
    },
    handleSizeChange(val) {
      this.serachData.pagesize = val;
      this.GetCustomList();
    },
    handleCurrentChange(val) {
      this.serachData.pageindex = val;
      this.GetCustomList();
    },
  },
  created() {
    this.GetProType();
    this.GetCustomList();
  },
};
</script>
<style></style>